<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<canvas id="myCanvas" width="400" height="400" style="border: 1px solid;"></canvas>
	</body>
	<!-- 奥运五环 -->
	<script type="text/javascript">
			var canvas=document.getElementById("myCanvas");
			var context=canvas.getContext("2d");
			context.strokeStyle="blue";
			context.beginPath();
			context.arc(40,40,30,0,Math.PI*2);
			context.lineWidth="5";
			context.stroke();
			context.strokeStyle="black";
			context.beginPath();
			context.arc(110,40,30,0,Math.PI*2);
			context.lineWidth="5";
			context.stroke();
			context.strokeStyle="red";
			context.beginPath();
			context.arc(180,40,30,0,Math.PI*2);
			context.lineWidth="5";
			context.stroke();
			context.strokeStyle="yellow";
			context.beginPath();
			context.arc(75,70,30,0,Math.PI*2);
			context.lineWidth="5";
			context.stroke();
			context.strokeStyle="green";
			context.beginPath();
			context.arc(145,70,30,0,Math.PI*2);
			context.lineWidth="5";
			context.stroke();
	</script>
	<!-- 正方形的旋转 -->
	<script type="text/javascript">
		var canvas=document.getElementById("myCanvas");
		var con=canvas.getContext("2d");
		con.strokeStyle="black";
		con.lineWidth="1";
		
		for(var i=0;i<16;i++){
			con.save();
			con.translate(250,250);  //中心点
			con.rotate(Math.PI*(i/16));
			con.translate(-250,-250);
			con.beginPath();
			con.strokeRect(200,200,100,100);
			con.closePath();
		}
	</script>
	
	
</html>
